/*
 *图片懒加载
 *2018/9/13
 *李闯
 *原生js实现懒加载图片
 */
window.onload = function (e) {
    //页面初始化
    layzLoad();

}

function layzLoad() {
    var imgs = document.querySelectorAll("img");
    var wh = (window.innerHeight|document.documentElement.clientHeight|window.screenX) + 100;    //页面可视高度
    //初始化时，首屏直接加载
    setSrc(imgs,scroll().top+wh);
    window.onscroll = function (ev) {
        var sct = scroll().top+wh; //滚动条高度//多出的一百高度，做预处理
        setSrc(imgs,sct);   //设置src
    };
    //设置src
    function setSrc(arrs,sct){
        //遍历img元素
        for(var i = 0 ; i< arrs.length; i++){
            if(arrs[i].getAttribute("data-src")){
                //如果有需要懒加载的，判断其位置
                var imgOffset = getOffset(arrs[i]);
                var imgSrc = arrs[i].getAttribute("data-src");
                var imgDefault = arrs[i].getAttribute("src");
                if(imgOffset<sct){
                    imgSrc!=imgDefault&&arrs[i].setAttribute("src",imgSrc); //设置图片路径
                }
            }
        }
    }
    //获取对象距离顶部偏移
    function getOffset(obj) {
        return obj.offsetTop;
    }
    //获取滚动条偏移
    function scroll() {
        if (window.pageYOffset != null) {
            //            支持IE9 +
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        } else if (document.compatMode == 'CSS1Compat') {
            //            声明了DTD

            return {
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }

        return {
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    }
}